<template>
  <el-container class="index-container">
    <el-header>
      <div class="left-box">
        <span>easy help</span>
        <!-- 折叠 -->
        <div class="toggle-box" @click="toggle" style="margin-left: 20px"><i :class="menuIcon"></i></div>
      </div>
      <!-- 用户登录/退出 -->
      <div class="right-box">
        <el-dropdown>
        <span class="el-dropdown-link">
           <img src="../assets/img/cuteGirl.gif" alt="profile">
        </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
            <el-dropdown-item icon="el-icon-house">个人中心</el-dropdown-item>
            <el-dropdown-item icon="el-icon-ship">交流讨论</el-dropdown-item>
            <el-dropdown-item @click.native.prevent="logout" icon="el-icon-switch-button">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto">
        <el-menu
          :router="true"
          :collapse="isCollapse"
          :unique-opened="true"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#031a26"
          text-color="#fff"
          active-text-color="#ffd04b">
          <MenuTree></MenuTree>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-backtop></el-backtop>
  </el-container>
</template>

<script>
  import MenuTree from "@/components/MenuTree";
  export default {
    name: 'Main',
    data(){
      return {
        menuIcon: 'el-icon-s-fold',
        isCollapse: false
      }
    },
    components:{
      MenuTree
    },
    methods: {
      logout(){
        this.$store.dispatch('user/logout').then(()=>{
          this.$router.push('/login')
        })
      },
      toggle(){
        this.isCollapse = !this.isCollapse
        if (this.isCollapse === true){
          this.menuIcon = 'el-icon-s-unfold'
        }else{
          this.menuIcon = 'el-icon-s-fold'
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      newsNotice() {
        this.$notify({
          title: '温馨提示',
          message: '如果您是新注册用户，请记得到个人中心完善个人信息哦~，不然无法发布接收任务~',
          duration: 0
        });
      }
    },
    mounted() {
      this.$router.push('/main/home')
      // 开局加载最新新闻消息。
      this.newsNotice()
    }
  }
</script>

<style lang="scss" scoped>
.index-container{
  height: 100%;
}
.el-header, .el-footer {
  background-color: #031a26;
  display: flex;
  color: #FFFFFF;
  align-items: center;
  /* left and right box */
  .left-box{
    display: flex;
    align-items: center;
    font-size: 20px;
    span{
      margin-left: 15px;
    }
  }
  .right-box{
    position: absolute;
    top: 1px;
    right: 10px;
  }

  img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}

.el-aside {
  background-color: #031a26;
  color: #333;
  margin-bottom: 0;
  padding: 0;
  .el-menu{
    border-right: none;
  }
}

.el-main {
  background-color: #E9EEF3;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
